<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>
<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>活动名称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="活动名称" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>活动图片
                </label>
                <button type="button" class="layui-btn" id="upload_btn">上传</button><span style="font-size: 10px;">（建议尺寸宽355像素，高175像素）</span>
                <div class="layui-upload-list" style="display: none;margin-left: 110px;">
                    <img onclick="showimg(this)" class="layui-upload-img" style="width: 100px;">
                </div>
                <input type="hidden" name="cover_img" id="cover_img" value="" />
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>活动类型
                </label>
                <div id="PType" style="width:100%;flex:1"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>活动场景
                </label>
                <div id="PScene" style="width:100%;flex:1"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    跳转地址
                </label>
                <div class="layui-input-block">
                    <input type="text" name="url" id="url" placeholder="跳转地址" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>充值金额
                </label>
                <div class="layui-input-block">
                    <input type="text" name="recharge_price" id="recharge_price" placeholder="充值金额(元)" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    充值K币
                </label>
                <div class="layui-input-block">
                    <input type="text" id="recharge_k" placeholder="充值K币" autocomplete="off" class="layui-input" value="" readonly />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>赠送K币
                </label>
                <div class="layui-input-block">
                    <input type="text" name="send_currency" id="send_currency" placeholder="赠送K币" autocomplete="off" class="layui-input" value="0" />
                </div>
            </div>

            <div class="layui-form-item" style="display: flex;">
                <label class="layui-form-label">
                    <span class="x-red">*</span>选择小程序
                </label>
                <div id="applet" style="width: 100%;flex: 1;"></div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>状态
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="valid" title="开启" checked>
                    <input type="radio" name="status" value="invalid" title="关闭">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>起止时间
                </label>
                <div class="layui-inline" id="time" style="display: flex;align-items: center;">
                    <div class="layui-input-inline" style="margin-right:10px">
                        <input type="text" class="layui-input" name="start_at" id="start_at" autocomplete="off" placeholder="开始时间">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="end_at" id="end_at" autocomplete="off" placeholder="结束时间">
                    </div>
                </div>
            </div>

            <input type="hidden" name="id" id="id" value="" />
            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />

        </form>
    </div>
    <script>
        let params = {
            addUrl: '/admin/activity/add',
            editUrl: '/admin/activity/edit',
            detailUrl: '/admin/activity/detail',
            hasCallback:false
        }
        form_ajax(params)
        let id = GetQueryString('id')

        let selectParams = {
            url: '/admin/activity/typeSelect',
            elem: '#PType',
            selected: [],
            tips: '选择活动类型',
            name: 'type',
            field_id: 'key',
            field_Name: 'value',
        }
        selectN(selectParams)

        let xmSelectAppletOption = {
            url:'/admin/applet/select',
            initValue:'',//初始值
            el:'#applet',
            showCount:4,
            pageSize:5,
            name: 'applet_ids'
        }
        xmSelectA(xmSelectAppletOption)

        uploadFile({
            elem: '#upload_btn',
            ossUrl: '/admin/activity/uploadImages',
            accept:"images",
            acceptMime:'image/*',
            uploadSuccessCallback: function (res) {
                $('.layui-upload-list').show()
                $('.layui-upload-img').attr('src', res.url);
                $("input[name='cover_img']").val(res.url);
            },
            uploadErrorCallback: function () {
                return layer.msg('上传失败');
            }
        })

        layui.use(['laydate','form'], function(){
            let layDate = layui.laydate;
            let form = layui.form;
            layDate.render({
                elem: '#time',
                range:['#start_at','#end_at'],
                format: 'yyyy-MM-dd HH:mm:ss',
                type:'datetime'
            });

            Ajax('/admin/activity/sceneCheckbox', {}).then(result => {
                let checkboxHtml = '';
                $.each(result.data, function(index, value) {
                    checkboxHtml += '<input type="checkbox" name="scene[]" lay-skin="primary" value="'+value.key+'" title="'+value.value+'" lay-verify="checkboxRequired">';
                });
                $('#PScene').html(checkboxHtml);
                form.render()
            }).then(datas =>{
                if (id) {
                    Ajax(params.detailUrl, { id }).then(result => {
                        if (result.data.cover_img) {
                            let {cover_img,applet_ids,type,scene} = result.data;

                            $('.layui-upload-list').show()
                            $('.layui-upload-img').attr('src', cover_img);

                            xmSelectAppletOption.initValue = applet_ids;
                            xmSelectA(xmSelectAppletOption);
                            selectParams.selected = [type];
                            selectN(selectParams)

                            scene.forEach(item=>{
                                $(`input[value=${item}]`).attr('checked',true)
                            })

                            form.val("formAjax",result.data);
                            form.render();
                        }
                        $('#recharge_k').val(result.data.recharge_price*100)
                    });
                }
            });
        })

        $('#recharge_price').change(function(){
            let val = $(this).val();
            $('#recharge_k').val(val * 100)
        });
        
    </script>
</body>

</html>